<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AopPreventingRepeatSubmissionsApplication</title>
    <style>
        .form-container {
            width: 300px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .form-container label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-container input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .form-container button[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .form-container button[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="form-container">
    <form id="myForm" action="http://127.0.0.1:8087/submit" method="POST">
        <label for="name">姓名:</label><br>
        <input type="text" id="name" name="name"><br>
        <label for="age">年龄:</label><br>
        <input type="text" id="age" name="age"><br><br>
        <button type="submit">提交</button>
    </form>
</div>

<script>
    document.getElementById("myForm").addEventListener("submit", function(event) {
        event.preventDefault();  // 阻止默认的表单提交行为

        var form = event.target;
        var formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            body: formData
        }).then(response => {
            if (response.ok) {
                console.log('提交成功');
                // 可以在此处理成功后的逻辑，比如显示成功信息或者重定向页面
            } else {
                console.error('提交失败');
            }
        }).catch(error => {
            console.error('网络错误:', error);
        });
    });
</script>

</body>
</html>
